<template>
    <el-popover trigger="focus" :width="350">
        <template #reference>
            <el-button :icon="modelValue" v-if="modelValue">
                <div class="icon-box">
                    <span>{{ modelValue }}</span>
                    <el-icon @click="clearIcon">
                        <Close />
                    </el-icon>
                </div>
            </el-button>
            <el-button plain v-else>点击选择图标</el-button>
        </template>
        <div class="el-icon-picker">
            <component v-for="icon in globalProperties.$icons" :key="icon"
                :class="[icon, 'icon', { 'icon-active': icon == modelValue }]" :is="icon"
                @click="emits('update:modelValue', icon)">
            </component>
        </div>
    </el-popover>
</template>
<script setup name="ElIconPicker">
import { getCurrentInstance } from 'vue'

const { appContext: { app: { config: { globalProperties } } } } = getCurrentInstance()


const props = defineProps(
    {
        modelValue: String,
        default: null
    }
)

const emits = defineEmits(['update:modelValue'])

const clearIcon = () => {
    emits('update:modelValue', null)
}

</script>

<style lang="less" scoped>
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.el-icon-picker {
    height: 256px;
    overflow-y: scroll;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--el-text-color-regular);
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;
}

.icon:hover {
    color: var(--el-color-primary);
}

.icon-active {
    color: var(--el-color-primary);
}
</style>